<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-1.10.1.js" ></script>
    <script>
        $(document).ready(function(){
            // span:nth-of-type(n); 子中 第几个该元素
            $("span:nth-of-type(2)").css({'background-color':'red'})
            // span:nth-child(n):  子中 第几个元素是该元素
            $("span:nth-child(2)").css("border", '1px solid black')
        })

    </script>
</head>
<body>
    <div> 
         <span>John</span>  <b>Kim</b> 
          <span>Adam</span>  <b>Rafael</b>  <span>Oleg</span>
    </div>
    <div>  
        <b>Dave</b>  <span>Ann</span></div><div>  <i><span>Maurice</span></i> 
             <span>Richard</span>  <span>Ralph</span>  <span>Jason</span>
    </div>
    <select id="sheng">

    </select>
    <script>
        var data = [{sheng:'辽宁', cites:['沈阳', '大连', '鞍山', '锦州']},
        {sheng:'江苏', cites:['南京', '无锡', '南通', '苏州', '常州']}
       ]
       // $.方法（）；   jquery方法   $().方法（）； jq对象的方法
        $.each(data, function(i, n){
            let str = `<option value="${i}">${n.sheng}</option>`
            $("#sheng").append(str);
        })  
    </script>
</body>
</html>